<template>
    <xui-dialog width="75%" @register="register">
    <div class="preview-box">
      <text-preview v-if="type == 'txt'" :full-name="fullName"></text-preview>
      <MarkdownPreview v-else-if="type == 'md'" :full-name="fullName"></MarkdownPreview>
      <div v-else><h3>无法查看</h3></div>
    </div>
    </xui-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FileExtInfo } from '/@/utils/FileHelper';
import XuiDialog from '/@/components/XUII/dialog/index.vue'
import TextPreview from './TextPreview.vue';
import { useDialog } from '../XUII/dialog';
import MarkdownPreview from './MarkdownPreview.vue';

const emits = defineEmits(['register'])

const type = ref<string>('txt')
const fullName = ref<string>()
const { register, dialog } = useDialog()
const open = (info: FileExtInfo) => {
    type.value = info.ext
    fullName.value = info.fullName
    dialog.open()
}
emits('register', { open })
</script>

<style lang="scss" scoped>
.preview-box {
    padding: 2em;
}
</style>